<template>
<!-- 采购 -->
  <div class="container-box">
    <div class="menu1css">
      <el-button size="small" type="primary">下载说明文档</el-button>
      <el-button size="small" type="primary">新增采购单</el-button>
    </div>
    <div class="menucss">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-remove="beforeRemove"
        >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <el-table
      :header-cell-style="tableHeaderColor"
      :data="tableData"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="采购物品id" width="80"></el-table-column>
      <el-table-column prop="staff" label="上传该采购物品的员工id" width="155"></el-table-column>
      <el-table-column prop="order_id" label="亚马逊订单id" width="95"></el-table-column>
      <el-table-column prop="sku_id" label="商品的SKUid" width="95"></el-table-column>
      <el-table-column prop="email" label="采购人员email" width="180"></el-table-column>
      <el-table-column prop="asin" label="ASIN" width="80"></el-table-column>
      <el-table-column prop="image_url" label="图片地址" width="180"></el-table-column>
      <el-table-column prop="color_size" label="商品颜色码数" width="105"></el-table-column>
      <el-table-column prop="chinese_node" label="中文介绍" width="80"></el-table-column>
      <el-table-column prop="sell_price" label="售价" width="80"></el-table-column>
      <el-table-column prop="pick_price" label="拣货价" width="80"></el-table-column>
      <el-table-column prop="road_price" label="运费" width="80"></el-table-column>
      <el-table-column prop="weight" label="重量" width="80"></el-table-column>
      <el-table-column prop="numbers" label="数量" width="80"></el-table-column>
      <el-table-column prop="abroad_price" label="国外运费" width="80"></el-table-column>
      <el-table-column prop="principal" label="本金" width="80"></el-table-column>
      <el-table-column prop="profit" label="利润" width="80"></el-table-column>
      <el-table-column prop="pick_goods_url" label="采购地址" width="150"></el-table-column>
      <el-table-column prop="create_time" label="上传时间" width="150"></el-table-column>
      <el-table-column width="240" label="操作">
        <el-button type="info" size="mini">详情</el-button>
        <el-button type="primary" size="mini">修改</el-button>
        <el-button type="danger" size="mini" @click="ondelete">删除</el-button>
      </el-table-column>
    </el-table>
    <pagination
      @sendPageSize="receivePageSize"
      @sendCurrentPage="receiveCurrentPage"
      :totalPage="totalPage"
    ></pagination>
  </div>
</template>
<script>
import pagination from "common/pagination";
export default {
  data() {
    return {
      totalPage: 300,
      tableData: [
        {
          id: "1",                    
          staff: "1",              
          order_id: "112-8965548-1687425",
          sku_id: "123", 
          email: "1",               
          asin: "1",             
          image_url: "",          
          color_size: "全黑44码",  
          chinese_node: "网面男鞋", 
          sell_price: "30.99",     
          pick_price: "57.00",     
          road_price: "8.00",     
          weight: "500",            
          numbers: "1",             
          abroad_price: "47.50",    
          principal: "112.50",      
          profit: "62.41",   
          pick_goods_url: "https://detail.1688.com/offer/569337607748.html?spm=b26110380.8880418.csimg003.1.60c7adccRcpj8f", 
          create_time: "2019-07-02T15:49:23 08:00" 
        },
        {
          id: "2",                    
          staff: "2",              
          order_id: "112-8965548-1687425",
          sku_id: "123", 
          email: "1",               
          asin: "1",             
          image_url: "",          
          color_size: "全黑44码",  
          chinese_node: "网面男鞋", 
          sell_price: "30.99",     
          pick_price: "57.00",     
          road_price: "8.00",     
          weight: "500",            
          numbers: "1",             
          abroad_price: "47.50",    
          principal: "112.50",      
          profit: "62.41",   
          pick_goods_url: "https://detail.1688.com/offer/569337607748.html?spm=b26110380.8880418.csimg003.1.60c7adccRcpj8f", 
          create_time: "2019-07-02T15:49:23 08:00" 
        }
      ],
      value: "",
      input2: "",
      DateValue: ""
    };
  },
  methods: {
    receivePageSize(val) {
      console.log(val);
    },
    receiveCurrentPage(val) {
      console.log(val);
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;";
      }
    },
    // 删除上传文件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    // 删除
    ondelete(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }
      );
    }
  },
  watch: {
    DateValue(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    }
  },
  components: {
    pagination
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    .input-box {
      margin-bottom: 20px;
    }
    .input-label div {
      padding: 0px !important;
    }
    .input-label .label {
      margin-top: 4px;
    }
  }
  .button-box {
    margin: 50px;
  }
  .menucss{
    padding-left: 5px;
    width: 200px;
    padding: 5px 0 5px 5px;
  }
  .menu1css{
    float: right;
    padding: 5px 5px 5px 0;
  }
}
</style>